<template>
  <div class="left-search">
      <div class="kanban-box-1">
            <div class="search-box">

              <el-form ref="searchForm" :model="searchForm" label-width="120px">
                <el-form-item label="时间类型：">
                  <el-select v-model="searchForm.timeslot" placeholder="请选择时间类型" size="small" style="width:100%;" @change="onTimelot">
                    <el-option label="年" value="3"></el-option>
                    <el-option label="月" value="2"></el-option>
                    <el-option label="日" value="1"></el-option>
					<el-option label="时" value="0"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="时间区间：">
                  <el-date-picker
                    v-model="searchForm.date"
                    :type="typeText"
                    align="right"
                    unlink-panels
                    style="width: 100%;" size="small">
                  </el-date-picker>
                </el-form-item>

                <el-form-item label="数据类型：">
                  <el-select v-model="searchForm.type" placeholder="请选择数据类型" style="width:100%;" size="small">
                    <el-option
                      v-for="item in ynoptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="已选对象：">
                  <el-input type="textarea" v-model="searchForm.duixiang" readonly></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="info" @click="onSubmit" size="small">查询</el-button>
                  <el-button size="small">重置</el-button>
                </el-form-item>
              </el-form>
            

              </div>
          </div>
          <div class="kanban-box-2">
            <div class="search-topbox">
            <el-input
              placeholder="请输入关键字检索 ( 部门名称 )"
              suffix-icon="el-icon-search"
              v-model="filterKeyText" size="small">
            </el-input>
            </div>
            <div class="tree-box">
              <el-tree
                class="filter-tree"
                :data="infoTreeData"
                :props="defaultProps"
                default-expand-all
                highlight-current
				show-checkbox
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                @node-click="treeNodeClick"
                ref="treeInfo">
              </el-tree>
            </div>
          </div>
  </div>
</template>

<script>
import {getDateWeek,dateFormat}  from "@/utils/index.js";
import { getTypeTree } from "@/api/sendhttp/typeTree";

export default {
  name: "LeftSearch",
  props: {
    levelType: {
      type:Number,
      default: 1,
    }
  },
  data() {
    return {
      typeText:'year',
      searchForm:{
        start_date:"2022-01-01 00:00:00",
        end_date:"2022-05-01 23:59:59",
        timeslot:'1',
        date:getDateWeek('Y'),
        levelType:'1',
        type:"1",
        duixiang:'',
        level_id:'',
        device_keynote:'',
      },
      ynoptions: [{
          value: '1',
          label: '用电'
        }, {
          value: '2',
          label: '用水'
        }, {
          value: '3',
          label: '用气'
        }],
      
        filterKeyText: '',
        infoTreeData:[],
        defaultProps: {
          children: 'childList',
          label: 'name'
        },
    };
  },
  watch: {
    filterKeyText(val) {
      this.$refs.treeInfo.filter(val);
    }
  },
  created() {
    // 获取区域树
    this.getInfoTreeData();
  },
  methods: {
      onTimelot(e){
        console.log('onTimelot:',e);
        if(e==1){this.typeText='year';}
        if(e==2){this.typeText='month';}
        if(e==3){this.typeText='date';}
        //this.$emit('node-click', 'timelot',e);
      },
      onSubmit() {
        var searchForm={};
        
        if(this.searchForm.timeslot==1){
          let date = new Date(this.searchForm.date);
          var dateText=dateFormat('YYYY',date);
          searchForm={start_date:dateText+"-01-01 00:08:00",end_date:(dateText+1)+"-01-01 07:59:59",}
        }
        if(this.searchForm.timeslot==2){
          let date = new Date(this.searchForm.date);
          var year = date.getFullYear();
	        var month = date.getMonth()+1;

          var dateText=dateFormat('YYYY-mm',this.searchForm.date);
          searchForm={start_date:dateText+"-01 00:08:00",end_date:year+'-'+month+"-1 07:59:59",}
        }
        if(this.searchForm.timeslot==3){
          var dateText=dateFormat('YYYY-mm-dd',this.searchForm.date);
          searchForm={start_date:dateText+" 00:00:00",end_date:dateText+" 23:59:59",}
        }
        this.searchForm.start_date=searchForm.start_date;
        this.searchForm.end_date=searchForm.end_date;

        this.$emit('node-click', 'searchForm', this.searchForm);
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      treeNodeClick(data,node,tree){
        this.searchForm.duixiang=''+data.id+'|'+data.name+'';
        this.searchForm.level_id=data.id;
        //this.$emit('node-click', 'workshop', data);
      },
      // 获取厂房区域树
      getInfoTreeData(){
        var leveljson={"levelType":"采集系统"};
/*        if(this.levelType==1){
          leveljson={"levelType":"采集系统"};
        }
        if(this.levelType==2){
          leveljson={"levelType":"工艺分项"};
        } */
        getTypeTree(leveljson).then(res => {
          console.log('部门区域',res);
          if(res.status===200){
            if(res.data.code=='200'){
              this.infoTreeData = res.data.data;
            }
          }
        });

      },
  }
}
</script>

<style>
.left-search{
  padding:10px;
}
.kanban-box-1{
  background:#F0EFEC;
  
  height:310px;
  border:1px solid #BBBBBB;
  border-radius:5px;
  width:100%;
}
.kanban-box-2{
  background:#f8f8f8;
  border:1px solid #BBBBBB;
  border-radius:5px;
  width:100%;
  margin-top:10px;
  overflow: hidden;
}
.search-box{
  padding:30px 30px 30px 0px;
}
.search-box .el-form-item{
  margin-bottom:10px!important;
}
.search-topbox{
  margin:5px 0px 0px 0px;
  padding:15px;
  border-bottom:1px solid #cccccc;
}
.tree-box{
  background:#ffffff;
  padding:10px 0px 20px 0px;
}
</style>
